<template>
  <div class="personal-box">
    <div class="personal-bg">
      <div class="setting" @click="toEdit">点击编辑资料</div>
    </div>
    <div class="personal-info">
      <div class="avatar">
        <img class="avatar-img" :src="userInfo.avatarUrl" alt="" />
      </div>
      <div class="info">
        <div class="name">{{ userInfo.account }}</div>
        <div class="phone">13392177867</div>
      </div>
    </div>
    <div class="tools">
      <div class="item" @click="myNote">
        <uni-icons type="list" size="30" color="blue"></uni-icons>
        <div class="item-name">简历列表</div>
      </div>
      <div class="item margin-left" @click="myRobot">
        <uni-icons type="weixin" size="30" color="green"></uni-icons>
        <div class="item-name">微信智能对话</div>
      </div>
    </div>
    <div class="login-out" @click="loginOut">退出登录</div>
  </div>

  <tab-bar></tab-bar>
</template>

<script setup lang="ts">
const userInfo = uni.getStorageSync("userInfo");
const myNote = () => {
  uni.navigateTo({ url: "/pages/notes/index" });
};
const myRobot = () => {
  uni.navigateTo({ url: "/pages/wxChat/index" });
};
const toEdit = () => {
  uni.navigateTo({ url: "/pages/personar/editInfo" });
};
const loginOut = () => {
  uni.removeStorageSync("userInfo");
  uni.navigateTo({ url: "/pages/login/login" });
};
</script>

<style lang="scss" scoped>
.personal-bg {
  width: 750rpx;
  height: 411rpx;
  background: url("../../static/personal-bg-image.png");
  background-size: 100% 100%;
  position: relative;
}
.personal-box {
  // background: url("../../static/personal-bg.png");
  background-size: 100% 100%;
  width: 750rpx;
  height: 100vh;
}
.personal-info {
  position: relative;
}
.avatar {
  position: relative;
  top: -30px;
  left: 115rpx;
  width: 218rpx;
  height: 218rpx;
  border-radius: 15rpx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 10rpx 27rpx 0px rgba(203, 215, 226, 0.4);
  padding: 12rpx;
}
.avatar-img {
  width: 194rpx;
  height: 194rpx;
}
.info {
  position: absolute;
  top: 37rpx;
  left: 386rpx;
}
.name {
  font-size: 36rpx;
  font-weight: 700;
  letter-spacing: 0px;
  color: rgba(51, 51, 51, 1);
}
.phone {
  font-size: 32rpx;
  font-weight: 500;
  color: rgba(153, 153, 153, 1);
  margin-top: 6rpx;
}
.tools {
  width: 682rpx;
  height: 180rpx;
  border-radius: 15rpx;
  background: rgba(255, 255, 255, 1);
  margin: 0 auto;
  padding: 30rpx;
  display: flex;
}
.item {
  text-align: center;
  .icon {
    width: 75rpx;
    height: 60rpx;
    background: url("../../static/my-favorite.png");
    background-size: 100% 100%;
    margin: 0 auto;
  }
  .out {
    width: 75rpx;
    height: 60rpx;
    background: url("../../static/my-favorite.png");
    background-size: 100% 100%;
    margin: 0 auto;
  }
  .item-name {
    font-size: 28rpx;
    font-weight: 500;
    margin-top: 10rpx;
    color: rgba(51, 51, 51, 1);
  }
}

.setting {
  width: 218rpx;
  height: 50rpx;
  background: rgba(239, 246, 246, 1);
  position: absolute;
  top: 230rpx;
  right: 0;
  font-size: 30rpx;
  font-weight: 500;
  line-height: 50rpx;
  color: rgba(0, 208, 194, 1);
  border-radius: 40rpx 0px, 0px, 40rpx;
}
.login-out {
  margin: 20rpx auto 0 auto;
  width: 680rpx;

  height: 100rpx;
  background: rgba(255, 255, 255, 1);
  font-size: 34rpx;
  font-weight: 700;
  color: rgba(3, 179, 133, 1);
  text-align: center;
  line-height: 100rpx;
  border-radius: 20rpx;
}
</style>
